<template lang="pug">
  .m-content
    .header {{baseInforValue.platformId}}详情
    .main
      el-tabs(v-model="activeName" type="border-card")
        el-tab-pane(label="基本信息" name="first")
          table.baseInfo
            tr(v-for="item in baseInformation")
              td {{item.label}}
              td {{filterField(item.value,baseInforValue[item.value])}}
        el-tab-pane(label="集团云侧专线详情（云调）" name="second")
          el-button(class="importBtn" type="primary"  icon="iconfont icon-chaxun1" @click="dciExport") 导出
          whole-row(:data="cloudBase")
        el-tab-pane(label="省内段专线详情（编排器）" name="third")
          el-button(class="importBtn" type="primary"  icon="iconfont icon-chaxun1" @click="orchExport") 导出
          whole-row(:data="composer")
</template>
<script>
import { specialcloud } from '@/api/resource'
import { areaCodes } from '@/utils/config'
import WholeRow from '@/components/wholeRow'
export default {
  components: {
    WholeRow
  },
  data () {
    return {
      areaCodes,
      activeName: 'first',
      baseInformation: [
        {
          label: '成员接入号',
          value: 'platformId'
        },
        {
          label: '组合接入号',
          value: 'combinationTag'
        },
        {
          label: 'bizid',
          value: 'userId'
        },
        {
          label: '归属地市',
          value: 'areaCode'
        },
        {
          label: '资源池',
          value: 'region'
        },
        {
          label: '专线类型',
          value: 'typeUpper'
        }
      ],
      baseInforValue: {},
      cloudBase: [],
      composer: []
    }
  },
  created () {
    const vpnId = this.$route.query && this.$route.query.id
    this.baseDetail(vpnId)
    this.dciDetail(vpnId)
    this.orchDetail(vpnId)
  },
  methods: {
    // 基本信息
    baseDetail (vpnId) {
      specialcloud.call(this, 'get', '/ctyun/vpn/' + vpnId + '/basic_detail', '', '').then(({ data }) => {
        data.data.typeUpper = data.data.type.toUpperCase()
        this.baseInforValue = data.data
      })
    },
    // 云调
    dciDetail (vpnId) {
      specialcloud.call(this, 'get', '/ctyun/vpn/' + vpnId + '/dci_detail', '', '').then(({ data }) => {
        this.cloudBase = data.data
      })
    },
    // 编排器
    orchDetail (vpnId) {
      specialcloud.call(this, 'get', '/ctyun/vpn/' + vpnId + '/orch_detail', '', '').then(({ data }) => {
        this.composer = data.data
      })
    },
    // 云调导出
    dciExport () {
      const vpnId = this.$route.query && this.$route.query.id
      window.location.href = 'api/v1/ctyun/vpn/' + vpnId + '/dic_detail/export'
    },
    // 编排器导出
    orchExport () {
      const vpnId = this.$route.query && this.$route.query.id
      window.location.href = 'api/v1/ctyun/vpn/' + vpnId + '/orch_detail/export'
    },
    filterField (key, cond) {
      if (key === 'areaCode') {
        let obj = areaCodes.filter(v => v.value === cond + '')[0]
        return obj && obj.label
      } else {
        return cond
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.m-content
  font-size 12px
  .header
    height 40px
    line-height @height
    padding 0 20px
    border-bottom 1px solid #e8e8e8
    color #333
  .main
    margin 23px
    .subtitle
      margin-bottom 15px
    .el-tabs
      box-shadow none
      border 0
      >>>
        .el-tabs__header
          border 0
        .el-tabs__item
          margin 0 -1px -1px
          height 35px
          line-height 35px
        .is-active
          border-color #1f60bd transparent transparent transparent
        .el-tabs__content
          padding 0
          margin-top 20px
    .baseInfo
      width: 100%;
      tr
        td
          border: 1px solid #dee6eb;
          padding: 12px;
          word-break break-word
          &:nth-of-type(1)
            width: 120px;
            background: #f7fafd
    .cloud
      width: 100%;
      tr
        th
          border: 1px solid #dee6eb;
          padding: 12px;
          word-break break-all;
          background: #f7fafd;
          text-align: left
      tr
        td
          border: 1px solid #dee6eb;
          padding: 12px;
          word-break break-all
          line-height 20px
          width 33.3%
    .tr-title
      color: #1f60bd;
      font-weight 600;
      width 26%
    .importBtn
      margin-bottom: 20px
    .border-noRight
      border-right-style none!important
    .border-noLeft
      border-left-style none!important
</style>
